import { RuleType } from "async-validator";
import { FormProps, FormItemProps, FormItemRule } from "element-plus";

export const ControlGroupConst = ["form", "layout"] as const;
export type ControlGroupType = (typeof ControlGroupConst)[number];

// 布局控件类型
export const LayoutControlConst = ["grid"] as const;
export type LayoutControlType = (typeof LayoutControlConst)[number];

export const FormControlConst = [
  "input",
  "textarea",
  "inputNumber",
  "inputTag",
  "switch",
  "select",
  "date",
  "radio",
  "checkbox",
  "slider",
  "rate",
] as const;
export type FormControlType = (typeof FormControlConst)[number];

export interface FormControlGroup {
  title: string;
  controlList: FormControl[];
}

export type FormFiledDataType = "array" | "string" | "number" | "date" | "boolean";
// 定义表单字段类型
export interface FormControl {
  group: ControlGroupType;
  type: FormControlType | LayoutControlType; // 控件类型
  dataType?: FormFiledDataType; // 数据类型
  name: string;
  options?: FormOption[];
}

// 定义选项类型
export interface FormOption {
  label: string;
  value: any;
}

export interface FormSetting {
  id?: string;
  name?: string;
  // sourceId?: string;
  sourceCode?: string;
  sourceName?: string;
  formConfig: FormConfig;
  formStyle?: FormProps;
  formItemList: FormGroup[] | FormField[];
}

export interface FormConfig {}

export interface FormGroup {
  id?: string;
  group?: ControlGroupType;
  type?: FormControlType | LayoutControlType; // 控件类型
  attrs?: Record<string, any>; // 不同控件独有属性
  formItemList?: FormField[];
}

// 定义表单字段类型
export interface FormField extends FormGroup {
  field?: string; // 字段名（唯一标识）
  dataType?: FormFiledDataType; // 数据类型
  item?: FormItem; // 表单item属性，表单验证等
  options?: FormOption[]; // 选择项（用于select/radio）
}

export interface FormItem extends FormItemProps {
  rules?: ItemRule[];
}

export const CustomRuleConst = [
  "required",
  "phone",
  "money",
  "card",
  "int",
  "numberString",
  "regexp",
] as const;
export type CustomRuleType = (typeof CustomRuleConst)[number];
export type MargeRuleType = RuleType | CustomRuleType;
export interface ItemRule extends Omit<FormItemRule, "type"> {
  type: MargeRuleType;
  label: string;
}

//grid布局配置
export interface GridLayout {
  cols: number;
  rows: GridLayoutRow[];
}

export interface GridLayoutRow {
  id: number;
  values: number[];
}

export const gridLayout = reactive<GridLayout[]>([
  {
    cols: 2,
    rows: [
      { id: 1, values: [1, 1] },
      { id: 2, values: [1, 2] },
      { id: 3, values: [2, 1] },
      { id: 4, values: [1, 3] },
      { id: 5, values: [3, 1] },
    ],
  },
  {
    cols: 3,
    rows: [
      { id: 1, values: [1, 1, 1] },
      { id: 2, values: [1, 1, 2] },
      { id: 3, values: [2, 1, 1] },
      { id: 4, values: [1, 2, 1] },
    ],
  },
  {
    cols: 4,
    rows: [{ id: 1, values: [1, 1, 1, 1] }],
  },
]);

export type FormOperateType = "preview" | "create" | "update";
